﻿@using Abp.Web.Mvc.Extensions
@using MyCompanyName.AbpZeroTemplate.Localization
@section Styles
{
    @Html.IncludeStyle("~/Areas/Mpa/Views/Notifications/index.min.css")
}
@section Scripts
{
    @Html.IncludeScript("~/Areas/Mpa/Views/Notifications/Index.js")
}
<div>
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>@L("Notifications")</span>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button class="btn btn-default" id="btnOpenNotificationSettingsModal"><i class="fa fa-cog"></i> @L("NotificationSettings")</button>
            <button class="btn btn-primary blue" id="btnSetAllNotificationsAsRead"><i class="fa fa-check"></i> @L("SetAllAsRead")</button>
        </div>
    </div>
    <div class="portlet light margin-bottom-0">
        <div class="portlet-title portlet-title-filter">
            <div class="inputs inputs-full-width">
                <div class="portlet-input">
                    <form>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <select id="TargetValueFilterSelectionCombobox"
                                            class="form-control bs-select"
                                            ng-model="vm.readStateFilter"
                                            ui-jq="selectpicker"
                                            ng-change="vm.getNotifications()"
                                            ui-options='{ iconBase: "fa", tickIcon: "fa fa-check" }'>
                                        <option value="">@L("All")</option>
                                        <option value="UNREAD">@L("Unread")</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <button id="RefreshNotificationTableButton" class="btn btn-default" style="display: block; width: 100%" ng-click="vm.getNotifications()"><i class="fa fa-refresh"></i> @L("Refresh")</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="portlet-body">
            <div id="NotificationsTable"></div>
        </div>
    </div>
</div>